<template>
  <div class="hand-pick" ref="handPick">

    <div class="line-content-title">恰饭专区</div>

    <!-- <swiper ref="mySwiper" :options="swiperOptions">
      <swiper-slide>Slide 1</swiper-slide>
      <swiper-slide>Slide 2</swiper-slide>
      <swiper-slide>Slide 3</swiper-slide>
      <swiper-slide>Slide 4</swiper-slide>
      <swiper-slide>Slide 5</swiper-slide>
      <div class="swiper-pagination" slot="pagination"></div>
    </swiper> -->

    <div class="swiper-placeholder-box">
      <swiper ref="mySwiper" :options="swiperOptions" v-if="banners.length">
        <swiper-slide v-for="banner of banners" :key="banner.id"
        :style="{backgroundImage: `url(${banner.banner_url})`}"
        >

          <a target="_blank" :href="banner['att_json']['redirect_url']" class="banner-box">
            <img class="banner-logo" v-if="banner['image_url_json']['logo']" 
            :src="banner['image_url_json']['logo']"
            />
            <span>
              {{banner.content}}
            </span>
          </a>

        </swiper-slide>
        <div class="swiper-pagination" slot="pagination"></div>
      </swiper>
    </div>


    <div class="line-content-title">小编力荐</div>

    <div class="article-group-box" v-for="(articlesGroup, index) of articlesInfo" :key="index">
      <!-- 两个盒子 -->
      <div class="two-article-box flex" v-if="articlesGroup.length>0">
        <MiNiArticle  v-for="(articleInfo, index) of articlesGroup.slice(0, 2)" :key="index" :articleInfo="articleInfo"/>
      </div>
      <!-- 两个盒子 -->
        
      <!-- 三个盒子 -->
      <div class="three-article-box flex" v-if="articlesGroup.length>2">
        <MiNiArticle v-for="(articleInfo, index) of articlesGroup.slice(2, 5)" :key="index" :articleInfo="articleInfo"/>
      </div>
      <!-- 三个盒子 -->

      <!-- 一个盒子 -->
      <div class="one-article-box"   v-if="articlesGroup.length>5">
        <MiNiArticle  class="flex"  v-for="(articleInfo, index) of articlesGroup.slice(5, 6)" :key="index" :articleInfo="articleInfo"/>
      </div>
      <!-- 一个盒子 -->
    </div>


  </div>
</template>

<script>
  import Vue from 'vue'
  import {
    Swiper,
    SwiperSlide,
    directive
  } from 'vue-awesome-swiper'
  import {getBanners} from '__SERVICE__/banner.js'
  import MiNiArticle from '__COMPONENTS__/mini_article/MiNiArticle.vue'
  // import style (<= Swiper 5.x) 第6版本有很多问题，不推荐使用
  import 'swiper/css/swiper.css'
  import loadLimitless from '__CORE__/mixins/loadLimitless.js'
  import { getArticlesByPage } from '__SERVICE__/article.js'
  export default {
    name: 'HandPick',
    mixins: [loadLimitless],
    components: {
      Swiper,
      SwiperSlide,
      MiNiArticle
    },
    data: () => ({
      swiperOptions: {
        // initialSlide: 0, //最开始的位置
        slidesPerView: 'auto',
        pagination: {
          el: '.swiper-pagination',
          clickable: true,
        },
        loop: true,
        autoplay: {
          delay: 1000,
          disableOnInteraction: false
        },
      },
      banners: [],
      articlesInfo: []
    }),
    computed: {
      swiper() {
        return this.$refs.mySwiper.$swiper
      }
    },
    methods: {
      //获取广告数据
      async getBanners() {
        this.$Loading.show()
        try {
          const result = await getBanners()
          const {data,  message} = result
          const {banners} = data
          banners.forEach((banner)=>{
            if(banner['att_json']) {
              banner['att_json'] = JSON.parse(banner['att_json'])
            }
            if(banner['image_url_json']) {
              banner['image_url_json'] = JSON.parse(banner['image_url_json'])
            }
          })
          this.banners = Object.freeze(banners)
          this.$Loading.hidden()
        }catch(e) {
          console.log('广告获取失败')
          this.$Loading.hidden()
        }
      },
      //async 本身就是一个promise只有在其函数内的所有代码执行完成，才会resolve
      async loadData() {
        try {
          if(this.articleCount && this.page > Math.ceil(this.articleCount / 6)) { // 是否取完数据
            console.log('数据取完了')
            return false
          }
          this.$Loading.show()
          const result = await getArticlesByPage({
            page: this.page++
          })
          this.$Loading.hidden()
          const { data: {articleCount, articles}, message } = result
          this.articleCount = articleCount // 绑定一个属性
          if(articles && articles.length){ // 更新数据
            this.articlesInfo.push(Object.freeze(articles))
          }else {
            //没有数据更新
            return false
          }
        }catch(e) {
          console.log(e.message)
        }
        return true
      }
    },
    // 挂载
    mounted() {
      this.bottomElement = document.getElementsByClassName('base-container')[0] // 确认底部元素
      this.listenWindowScroll()
    },
    // 创建
    created() {
      //执行获取广告
      this.getBanners()
      this.page = 1 // 确认当前获取到的页数
      this.loadData() //第一次获取数据
    },
    activated() {//已经缓存该页面了
      console.log('activated')
    }
  }
</script>

<style lang="less">
  @import url('__CSS__/hand_pick/hand_pick.less');
</style>